const { createApp, reactive, ref, computed } = Vue;
const { ElMessage } = ElementPlus;

// 创建数据库
const db = new Dexie("mydb")
//添加表格
db.version(1).stores({
    product: "++id,&name,unit,alias,comment,price",
    customer:"++id,&name,address,tel,alias"
})

const app = createApp({
    setup() {

        const addProductDialogShow = ref(false)

        const formData = ref({

            name: "",
            unit: "",
            price: "",
            alias: "",
            comment: ""
        })

        const fieldList = [
            { name: "行号", cols: 2 },
            { name: "品名", cols: 5 },
            { name: "单价", cols: 2 },
            { name: "数量", cols: 2 },
            { name: "总价", cols: 2 },
            { name: "备注", cols: 2 },
            { name: "操作", cols: 5 }
        ]
        const productList = ref([

            // {
            //     name: "intel i7 14700F",
            //     unit: "个",
            //     price: "5000",
            //     total: "10",
            //     totalprice: "50000",
            //     comment: "三年质保",
            //     isEditing: false

            // }
        ]);

        const addRow = () => {

            productList.value.push({
                name: "",
                price: "",
                total: "",
                totalprice: "",
                comment: "",
                isEditing: true
            })

            setTimeout(() => {

                let inputref = document.getElementById("inputref");
                inputref.focus();


            }, 100)
        }

        const saveRow = (row) => {
            row.isEditing = false
        }
        const deleteRow = (index, row) => {

            productList.value.splice(index, 1)

        }

        const showDialog = () => {

            addProductDialogShow.value = true
        }

        const addProduct = async () => {

            try {

                const row_temp = { ...formData.value }
                await db.product.add(row_temp)
                //清空表单
                for (let key in formData.value)
                    formData.value[key] = ""
                //品名自动获取焦点
                setTimeout(() => {
                    document.getElementById("productName").focus()
                }, 200)
                alert("添加商品成功")


            }
            catch (err) {
                alert(err.message)
            }

        }

        const querySearch = async (queryString, cb) => {

            if (!queryString) {
                cb([])
                console.log("没得数据");

                return
            }

            const result = await db.product.filter(row => (row.name.includes(queryString) || row.alias.includes(queryString))).toArray()
            cb(result)


        }

        const handleSelect = (item,row) => {

            //设置一些查到的参数
            row.unit = item.unit
            row.price = item.price
            row.comment = item.comment

        }

        // 计算属性
        const isEditing = computed(() => {

            return productList.value.some(item => item.isEditing)
        })

        return {

            fieldList,
            productList,
            addRow,
            saveRow,
            deleteRow,
            isEditing,
            addProductDialogShow,
            showDialog,
            formData,
            addProduct,
            querySearch,
            handleSelect
        };
    }
})


app.use(ElementPlus)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

app.mount('#app');